<template>
  <!-- 工程基本情况 -->

  <a-form-model ref="ruleForm" :model="companyVO" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
    <a-spin :spinning="loading" class="form-item">
      <!-- 表单 -->

      <custom-form :isEmit="false" :formList="formList" :form="companyVO" :editModel="editModel == 0 ? '' : ''"> </custom-form>

      <s-table
        bordered
        :scroll="{ x: 2400 }"
        ref="table"
        :page-keys="['pageNum', 'pageSize']"
        tableLayout="fixed"
        size="default"
        rowKey="key"
        :columns="columns"
        :data="loadData"
        :rowClassName="(record, index) => (record.branchCompanyName === record.projectName ? 'table-striped' : null)"
        :alert="true"
        show-size-changer
        show-quick-jumper
        :showPagination="false"
      >
      </s-table>
      <!-- 页脚操作栏 -->
      <div class="btn_box tool-btns--fixed" style="bottom:50px" v-if="editModel != 0">
        <a-button type="primary" :loading="loadingBtn.DRAFT" @click="next">下一步</a-button>
      </div>
    </a-spin>
  </a-form-model>
</template>

<script>
import BaseEditPage from '@/views/baseEditPage' // 编辑详情页基础配置
import BSelect from '@/components/BComponents/BSelect'
import SelectSubCompany from '@/components/Select/SelectSubCompany' // 分公司
import SelectProject from '@/components/Select/SelectProject' // 分公司
import { projectInfoColumns } from '../model.js'

export default {
  name: 'projectInfo',
  extends: new BaseEditPage(),
  components: {
    SelectProject,
    BSelect,
    SelectSubCompany
  },

  data() {
    const columns = projectInfoColumns

    return {
      columns,
      loading: false, // 加载控件
      editModel: 1, // 操作状态:0 查看;1 编辑
      // form: { keyProgram: '', month: '', detailsList: [] }, // 表单
      id: '',
      selectedRowKeys: [],
      loadingBtn: {
        DELETE: false,
        DRAFT: false,
        SUBMITTED: false,
        REJECTED: false
      },

      companyVO: { resourcesVOList: [] },
      loadData: () => {
        if (this.companyVO?.resourcesVOList?.length > 0) {
          return Promise.resolve({
            data: this.companyVO.resourcesVOList || []
          })
        }
      },
      // rules: { month: [{ required: true, message: '请选择' }] }, // 校验规则
      init: false // 初始化控件
    }
  },
  props: {
    isAudit: {
      // 是否作为审批详情
      type: Boolean,
      default: false
    },
    form: {
      type: Object,
      default: {
        companyVO: {}
      }
    }
  },
  watch: {
    isAudit: {
      immediate: true,
      handler(val) {
        if (val) {
          this.$nextTick(() => {
            this.editModel = 0
          })
        }
      }
    },
    form: {
      handler() {
        // 对合并项进行处理
        this.form.companyVO?.resourcesVOList?.forEach((item, index) => {
          item.key = index
          // 合并分公司相同的行
          if (item.branchCompanyName !== this.form.companyVO.resourcesVOList[index - 1]?.branchCompanyName && item.branchCompanyName === this.form.companyVO.resourcesVOList[index + 1]?.branchCompanyName) {
            item.rowSpan = this.form.companyVO.resourcesVOList.filter((i) => i.branchCompanyName === item.branchCompanyName).length
          }
          //对么有项目的特殊处理
          if(!item.projectName){
            item.specialSpan = true;
          }
         // 合并项目和分公司相同的列
          if (item.projectName === item.branchCompanyName) {
            item.colSpan = 2
          }
        })
        this.companyVO = this.form.companyVO

        this.$refs.table.refresh(true)
      }
    }
  },
  computed: {
    formList() {
      return [
        {
          keyName: 'month',
          type: 'BaseInput',
          disabled: true,
          label: '月份'
        }
      ]
    },

  },
  mounted() {
    // 不为添加时请求详情

    if (this.editModel != 2) {
      // this.getDetailData()
    } else {
      this.$nextTick(() => {
        // 默认映射联系人为登陆人
        this.getMonth()
        this.getTable()
        this.init = true
      })
    }
  },

  methods: {
    next() {
      this.$emit('nextStep')
    }
  }
}
</script>
<style lang="less" scoped>
/deep/ .form-item  {
  .ant-input:not([disabled]),
  .ant-select:not(.ant-select-disabled) .ant-select-selection,
  .ant-calendar-picker-input,
  .ant-input-number:not([disabled]),
  .ant-cascader-picker {
    border-color: #e4ac0b;

    background-color: #fff9e8;
  }
  .ant-input-disabled,
  .ant-input-number-disabled .ant-input-number-input,
  .ant-time-picker-input[disabled] {
    border-color: #d9d9d9 !important;
    background-color: #f5f5f5 !important;
  }

  .remark {
    .ant-input {
      border-color: inherit;
      background-color: initial;
    }
  }
  .table-striped td {
    background-color: #fafafa;
  }
}
</style>